<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码重置步骤绕过场景</title>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <style>
        .step-indicator {
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .step-indicator div {
            text-align: center;
            flex: 1;
            position: relative;
        }
        .step-indicator div::before {
            content: '';
            display: block;
            height: 2px;
            width: 100%;
            background: #ccc;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }
        .step-indicator div:first-child::before {
            display: none;
        }
        .step-indicator div span {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: #ccc;
            color: #fff;
            border-radius: 50%;
        }
        .step-indicator div.active span {
            background: #5FB878;
        }
        .step-indicator div.active + div::before {
            background: #5FB878;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="step-indicator">
        <div class="active"><span>1</span><p>验证用户名</p></div>
        <div><span>2</span><p>验证旧密码</p></div>
        <div><span>3</span><p>输入新密码</p></div>
    </div>

    <form class="layui-form" id="reset-password-form">
        <div class="step step-1">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" placeholder="请输入用户名" class="layui-input" required>
                </div>
            </div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn layui-btn-normal" id="next1">下一步</button>
            </div>
        </div>

        <!-- 第二步 -->
        <div class="step step-2" style="display: none;">
            <div class="layui-form-item">
                <label class="layui-form-label">旧密码</label>
                <div class="layui-input-block">
                    <input type="text" name="old-password" placeholder="请输入旧密码" class="layui-input" required>
                </div>
            </div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn layui-btn-primary" id="prev2">上一步</button>
                <button type="button" class="layui-btn layui-btn-normal" id="next2">下一步</button>
            </div>
        </div>

        <!-- 第三步 -->
        <div class="step step-3" style="display: none;">
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="text" name="new-password" placeholder="请输入新密码" class="layui-input" required>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认新密码</label>
                <div class="layui-input-block">
                    <input type="text" name="confirm-password" placeholder="再次输入新密码" class="layui-input" required>
                </div>
            </div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn layui-btn-primary" id="prev3">上一步</button>
                <button type="submit" class="layui-btn layui-btn-normal">完成</button>
            </div>
        </div>
    </form>
</div>

<div th:replace="~{common/common::script}"></div>
<script>
    layui.use(['form'], function () {
        const $ = layui.$;

        let currentStep = 1;

        function updateStepIndicator(step) {
            $('.step-indicator div').removeClass('active');
            $(`.step-indicator div:nth-child(${step})`).addClass('active');
        }

        function showStep(step) {
            $('.step').hide();
            $(`.step-${step}`).show();
            updateStepIndicator(step);
        }

        $('#next1').on('click', function () {
            const username = $('input[name="username"]').val();
            if (!username) {
                return layer.msg('请输入用户名');
            }

            $.post('/loginconfront/bypass/step1', { username: username }, function (res) {
                if (res.code === 0) { // 假设接口返回 { code: 0, msg: '验证成功' }
                    currentStep = 2;
                    showStep(currentStep);
                } else {
                    layer.msg(res.msg || '验证失败');
                }
            });
        });

        $('#next2').on('click', function () {
            const oldPassword = $('input[name="old-password"]').val();
            if (!oldPassword) {
                return layer.msg('请输入旧密码');
            }

            $.post('/loginconfront/bypass/step2', { oldPassword: oldPassword }, function (res) {
                if (res.code === 0) {
                    currentStep = 3;
                    showStep(currentStep);
                } else {
                    layer.msg(res.msg || '旧密码验证失败');
                }
            });
        });

        $('#reset-password-form').on('submit', function (e) {
            e.preventDefault();

            const newPassword = $('input[name="new-password"]').val();
            const confirmPassword = $('input[name="confirm-password"]').val();
            if (newPassword !== confirmPassword) {
                return layer.msg('两次密码输入不一致');
            }

            $.post('/loginconfront/bypass/step3', { newPassword: newPassword }, function (res) {
                if (res.code === 0) {
                    layer.msg('密码重置成功');
                } else {
                    layer.msg(res.msg || '密码重置失败');
                }
            });
        });

        $('#prev2').on('click', function () {
            currentStep = 1;
            showStep(currentStep);
        });

        $('#prev3').on('click', function () {
            currentStep = 2;
            showStep(currentStep);
        });
    });
</script>
</body>
</html>
